<template>
  <div class="xj">
    <!-- 喜剧片·要不跟我们一起打球得了 -->
    <h6><img src="../../../assets/img/yl-img/zx/zx_111.jpg" />{{ xiju }}</h6>
    <ul class="xiju">
      <li v-for="comedys in xijudata" :key="comedys.id">
        <img :src="comedys.img" >
        <p>{{ comedys.name }}</p>
        <span>{{ comedys.author }}</span>
      </li>
      <h5><span>查看更多</span> <span>换一换</span></h5>
    </ul>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  name: "Xiju",
  props: ["xiju"],
  data() {
    return {
      comedy: [],
      kv: {
        "喜剧片·要不跟我们一起打球得了":"xiju"
      },
    };
  },
  // created() {
  //   axios({
  //     url: "/comedy",
  //     params: {
  //       type: this.kv[this.xiju],
  //     },
  //   }).then((res) => (this.comedy = res.data));
  // },
// mounted(){
// console.log(this.xijudata)
// },
created() {
    this.$store.dispatch("LINK_XIJU_DATA","/vip/comedy")
    },
    computed:{
      xijudata(){
        return this.$store.state.VipXiJuM.comedy
      }
   }

};
</script>

<style scoped>
.xj {
  margin-left: 0.15rem;
}
.xiju {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.12rem;
  margin-bottom: 0.8rem;
}
.xiju li {
  width: 50%;
  margin-bottom: 0.2rem;
  color: white;
}
.xiju img {
  width: 1.9rem;
  height: 1.1rem;
  display: block;
}
.xiju li p {
  font-size: 0.14rem;
  margin-top: 0.1rem;
  margin-bottom: 0.08rem;
  color: black;
}
.xiju li span {
  color: #828288;
  font-size: 0.12rem;
}
h6 {
  font-size: 0.17rem;
  padding-top: 0.3rem;
  width: 100%;
  height: 0.18rem;
  color: black;
  /* background-color: royalblue; */
}
h5 {
  font-weight: normal;
  height: 0.44rem;
  width: 100%;
  margin-top: 0.06rem;
}
h5 span {
  width: 1.9rem;
  display: inline-block;
  background-color: #f7f5f6;
  line-height: 0.44rem;
  text-align: center;
  color: #a6a6a6;
  border-radius: 0.05rem;
}
h5 span:first-child {
  float: left;
  margin-right: 0.1rem;
  height: 100%;
}
</style>